<template>
  <div class="balance-bonus page" ref="webview">
    <div class="hd">
      <div class="nav-bar">
        <van-nav-bar :title="queryType === 'balance' ? '余额明细': queryType === 'bonus'?'奖金明细':'充值明细'" left-arrow fixed @click-left="$router.go(-1)" />
      </div>
      <van-dropdown-menu class="dropdown-menu" v-if="queryType === 'balance' || queryType === 'bonus'">
        <van-dropdown-item v-model="type" :options="queryType === 'balance'? balanceTypeoOption:bonusTypeoOption" @closed="closeDropdown" @change="changeDropdown" />
        <van-dropdown-item v-model="time" :options="timeOption" @closed="closeDropdown" @change="changeDropdown" />
      </van-dropdown-menu>
    </div>
    <div class="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="nodata" v-if="dataList.length===0" style="height:200px;">暂无数据</div>
        <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>5?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false" v-else>
          <template v-for="(record, index) in dataList">
            <div class="list" :key="index">
              <div class="info">
                <div class="name">{{queryType === 'topup' ? '充值': record.remark}}
                  <span class="state" v-if="queryType === 'topup'">({{ record.status_str }})</span>
                </div>
                <div class="time">{{record.pay_time || record.create_time}}</div>
              </div>
              <div class="state">
                <span class="amount" :class="{success: record.recharge_amount>0 || record.amount > 0,failure: (queryType === 'topup' || queryType === 'bonus') || record.amount < 0}">{{type === 'bonus'?'+':''}}{{(record.recharge_amount || record.amount || record.bonus_amount) | toDecimalByCutoffWithoutOmit}}</span>
                <span v-if="queryType === 'topup'" class="text" @click="showPayInfo(record)">付款信息</span>
                <span v-if="queryType === 'balance'" class="balance">账户余额: {{record.balance}}</span>
              </div>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-popup round v-model="isShow">
      <div class="payInfo" v-if="showRecord.type === 1">
        <div class="list">
          <span class="name">微信昵称</span>
          <p class="info">{{ showRecord.payee_name }}</p>
        </div>
        <div class="list">
          <span class="name">微信号</span>
          <p class="info">{{ showRecord.payee_account }}</p>
        </div>
        <div class="list">
          <span class="name">收款码</span>
          <p class="info active" @click="showPreview=true">查看</p>
        </div>
      </div>
      <div class="payInfo" v-if="showRecord.type === 2">
        <div class="list">
          <span class="name">姓名</span>
          <p class="info">{{ showRecord.payee_name }}</p>
        </div>
        <div class="list">
          <span class="name">手机号</span>
          <p class="info">{{ showRecord.payee_account }}</p>
        </div>
        <div class="list">
          <span class="name">付款码</span>
          <p class="info active" @click="showPreview=true">查看</p>
        </div>
      </div>
      <div class="payInfo" v-if="showRecord.type === 3">
        <div class="list">
          <span class="name">所属银行</span>
          <p class="info">{{ showRecord.payee_bank_name }}</p>
        </div>
        <div class="list">
          <span class="name">银行支行</span>
          <p class="info">{{ showRecord.payee_bank_branch }}</p>
        </div>
        <div class="list">
          <span class="name">银行卡号</span>
          <p class="info">{{ showRecord.payee_account }}</p>
        </div>
        <div class="list">
          <span class="name">姓名</span>
          <p class="info">{{ showRecord.payee_name }}</p>
        </div>
      </div>
    </van-popup>
    <van-image-preview :class="{isApp:isApp}" v-model="showPreview" closeable :showIndex="false" :images="[showRecord.payee_account_img]" />
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'balanceBonusTopup',
  data () {
    return {
      showPreview: false,
      page: 1,
      dataList: [],
      statusList: [
        '待传转账截图', '待审核', '审核通过', '审核驳回'
      ],
      type: 0,
      time: 0,
      bonusTypeoOption: [
        { text: '交易类型', value: 0 },
        { text: '销售提成', value: 1 },
        { text: '分享加速', value: 2 },
        { text: '辅导加速', value: 3 },
        { text: '管理加速', value: 4 },
        { text: '平级加速', value: 5 }
      ],
      balanceTypeoOption: [
        { text: '交易类型', value: 0 },
        { text: '销售提成', value: 1 },
        { text: '分享加速', value: 2 },
        { text: '管理加速', value: 3 },
        { text: '辅导加速', value: 4 },
        { text: '平级加速', value: 5 },
        { text: '充值', value: 6 },
        { text: '购物', value: 7 },
        { text: '复购', value: 8 }

      ],
      timeOption: [
        { text: '时间', value: 0 },
        { text: '最近3天', value: 1 },
        { text: '最近7天', value: 2 },
        { text: '最近1个月', value: 3 },
        { text: '最近3个月', value: 4 }
      ],
      showRecord: {},
      isShow: false,
      disabled: false,
      isLoading: false,
      apiType: 'user',
      apiUrl: ''
    };
  },
  mixins: [mixins],
  computed: {
    queryType () {
      return this.$route.params.type;
    },
    isApp: {
      get () {
        return !!localStorage.getItem('isApp') || !!this.$route.query.isApp;
      }
    }
  },
  created () {
    if (this.queryType === 'balance') {
      this.apiUrl = 'water';
      this.params = { type: 1 };
    } else if (this.queryType === 'bonus') {
      // this.params = { type: 2 };
      this.apiUrl = 'bonusRecord';
    } else {
      this.params = { type: 2 };
      this.apiUrl = 'rechargeRecord';
    }
    this.getList(this.apiUrl, true);
  },
  methods: {
    closeDropdown () {
      this.getList(this.apiUrl, true);
    },
    // 点击筛选
    changeDropdown (type) {
      if (this.type) {
        this.params[this.queryType === 'balance' ? 'tradeType' : 'type'] = this.type;
      } else {
        delete this.params[this.queryType === 'balance' ? 'tradeType' : 'type'];
      }
      if (this.time) {
        this.params.time = this.time;
      } else {
        delete this.params.time;
      }
    },
    showPayInfo (record) {
      this.isShow = true;
      this.showRecord = record;
    },
    goDetails () {
      this.$router.push({ 'path': '/address/edit', query: { id: 1 } });
    }
  }
};
</script>
<style lang="less" scoped>
.balance-bonus {
  height: 100%;
  display: flex;
  flex-direction: column;
  .payInfo {
    width: 572px;
    padding: 30px 40px;
    .list {
      display: flex;
      padding: 14px 0;
      .name {
        display: block;
        width: 140px;
        font-size: 28px;
        color: #353535;
      }
      .info {
        flex: 1;
        font-size: 28px;
        font-weight: 300;
        color: #353535;
      }
      .info.active {
        color: #917eff;
      }
    }
  }
  .dropdown-menu {
    &::after {
      display: none;
    }
  }
  .content {
    flex: 1;
    box-sizing: border-box;
    overflow: auto;
    background-color: #fff;
    border-top: 1px solid rgba(238, 238, 238, 0.8); /*no*/
    .list {
      margin: 0 40px;
      padding: 30px 0;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid rgba(238, 238, 238, 0.8); /*no*/
      .info {
        .name {
          color: #353535;
          font-size: 30px;
          .state {
            color: #917eff;
            font-size: 24px;
            padding: 0 15px;
          }
        }
        .time {
          font-size: 24px;
          padding-top: 10px;
          display: block;
          color: #959595;
        }
      }
      .state {
        text-align: right;
        .amount {
          font-size: 30px;
          display: block;
        }
        .failure {
          color: #ff0000;
        }
        .success {
          color: #009919;
        }
        .text {
          color: #917eff;
          padding-top: 10px;
          display: block;
          font-size: 24px;
        }
        .balance {
          color: #959595;
          padding-top: 12px;
          display: block;
          font-size: 26px;
        }
      }
    }
  }
}
</style>
